<template>
	<view class="my-team">
		<view style="margin: 20upx;">
			<view class="bg-img">
				<view class="bg">
					<image class="icon" :src="info.avatar" mode=""></image>
					<view class="text">
						<view class="name">{{info.nickname}}</view>
						<view class="grade">{{info.level_name}}</view>
					</view>
				</view>
				<view class="order-item">
					<view class="order-text">
						<view class="num">{{num.direct_order}}</view>
						<view class="order">直推订单</view>
					</view>
					<view class="order-text">
						<view class="num">{{num.team_order}}</view>
						<view class="order">团队订单</view>
					</view>
				</view>
			</view>
		</view>

		<view class="navbar">
			<view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{ current: tabIndex === index }" @click="tabClick(index)">{{ item.text }}</view>
		</view>
		<view class="center">
			<swiper :current="tabIndex" class="swiper-box" duration="300" @change="changeTab">
				<swiper-item class="tab-content" v-for="(item, index) in navList" :key="index">
					<view class="swiper-item">
						<!-- <scroll-view class="list-scroll-content" scroll-y="true"> -->
							<!-- <view style="height: 112upx;"></view> -->
							<view class="consume-item" v-for="item in lists" :key="item.id">
								<view class="item-left">
									<image style="width: 76upx;height: 76upx;margin-right: 20upx;" :src="item.avatar" mode=""></image>
									<view class="consume-left">
										<view class="item-text">
											<view class="number">昵称：{{item.nickname}}</view>
											<view class="tag">{{item.level_name}}</view>
										</view>
										<view class="time">注册时间：{{item.create_at}}</view>
									</view>
								</view>
								<view class="price">{{item.order}}订单</view>
							</view>
							<!-- <view class="consume-item">
								<view class="item-left">
									<image style="width: 76upx;height: 76upx;margin-right: 20upx;" src="../../static/img/team/icon1.png" mode=""></image>
									<view class="consume-left">
										<view class="item-text">
											<view class="number">昵称：A苗米安娜</view>
											<view class="tag">导购</view>
										</view>
										<view class="time">注册时间：2020-06-29</view>
									</view>
								</view>
								<view class="price">团队45订单</view>
							</view>
							<view class="consume-item">
								<view class="item-left">
									<image style="width: 76upx;height: 76upx;margin-right: 20upx;" src="../../static/img/team/icon1.png" mode=""></image>
									<view class="consume-left">
										<view class="item-text">
											<view class="number">昵称：A苗米安娜</view>
											<view class="tag">导购</view>
										</view>
										<view class="time">注册时间：2020-06-29</view>
									</view>
								</view>
								<view class="price">团队45订单</view>
							</view>
							<view class="consume-item">
								<view class="item-left">
									<image style="width: 76upx;height: 76upx;margin-right: 20upx;" src="../../static/img/team/icon1.png" mode=""></image>
									<view class="consume-left">
										<view class="item-text">
											<view class="number">昵称：A苗米安娜</view>
											<view class="tag">导购</view>
										</view>
										<view class="time">注册时间：2020-06-29</view>
									</view>
								</view>
								<view class="price">团队45订单</view>
							</view> -->
						<!-- </scroll-view> -->
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
import service from '@/store/service.js';
export default {
	data() {
		return {
			tabIndex: 0,
			info:[],
			num:'',
			lists:[],
			navList: [
				{
					text: '直推(4)',
					state: '0',
					type:1
				},
				{
					text: '间推 (12) ',
					state: '1',
					type:2
				}
			]
		};
	},
	onLoad:function(){
	this.getTeams()	
	this.getDetail()
	},
	methods: {
		getTeams() {
			var self = this;
			self.$http
				.get(service.api.user.getMyTeam, {
					// goodsid: self.id
				})
				.then(function(res) {
					var list = res.data;
					self.num=list
					self.info = list.info;
					console.log(self.num,66);
					self.navList[0].text = '直推('+self.num.direct+')'
					self.navList[1].text = '间推('+self.num.indirect+')'
				});
		},
		getDetail(){
			var self = this;
			self.$http
				.get(service.api.user.subordinate, {
					// goodsid: self.id
					type:self.navList.type
				})
				.then(function(res) {
					var list = res.data;
					self.lists=list
					// self.info = list.info;
					// console.log(self.num,66);
					// self.navList[0].text = '直推('+self.num.direct+')'
					// self.navList[1].text = '间推('+self.num.indirect+')'
				});
		},
		changeTab(e) {
			this.tabClick(e.target.current);
		},
		//顶部tab点击
		tabClick(index) {
			this.change(index);
		},
		change(type) {
			this.tabIndex = type;
		},
		tapTab(index, id) {
			this.tabid = id;
			if (this.tabIndex == index) {
				this.isClickChange = true;
				this.tabIndex = index;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.bg-img {
	position: relative;
	width: 100%;
	height: 350upx;
	background: url(../../static/img/team/bg.png) no-repeat;
	background-size: 100% 100%;
}
.bg {
	display: flex;
}
.icon {
	width: 105upx;
	height: 105upx;
	margin: 25upx 20upx 0 25upx;
	border-radius: 50%;
}
.text {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin-left: 20upx;
}
.name {
	font-weight: bold;
	color: #fff;
}
.grade {
	color: #c85301;
	font-size: 22upx;
	background-color: #fff;
	border-radius: 17upx;
	border: 1px solid #fff;
	width: 88upx;
	text-align: center;
}
.order-item {
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.order-text {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: #fff;
	margin-top: 50upx;
}
.num {
	font-size: 36upx;
	font-weight: bold;
}
.order {
	font-size: 24upx;
}
.consume-item:nth-last-child(1) {
	border-bottom: none;
}
.consume-item {
	background-color: #fff;
	display: flex;
	justify-content: space-between;
	padding: 28upx 22upx 22upx;
	border-bottom: 1px solid #f4f4f4;
	margin: 0 20upx;
	border-radius: 10upx;
}
.item-left {
	display: flex;
}
.item-text {
	display: flex;
	align-items: center;
}
.number {
	font-size: 26upx;
	color: #666;
}
.tag {
	border: 1px solid #ffb463;
	border-radius: 17upx;
	// width: 86upx;
	height: 34upx;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffaf62;
	font-size: 22upx;
	margin-left: 20upx;
	padding: 10upx;
}
.time {
	color: #999;
	font-size: 24upx;
	font-weight: 500;
}
.price {
	display: flex;
	align-items: center;
	color: #333;
	font-size: 26upx;
}
.money {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	color: #f81149;
}
.navbar {
	background-color: #f3f3f3;
	display: flex;
	// height: 56px;
	// padding: 0 5px;
	justify-content: space-between;
	// box-shadow: 0px 4upx 8upx #dcdfe6;
	position: relative;
	// width: 100%;
	z-index: 200;
	padding-bottom: 28upx;
	// height: 112upx;
	// width: 100upx;
	.nav-item {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		font-size: 15px;
		color: #303133;
		position: relative;
		border-radius: 28upx;
		margin: 0 80upx;
		&.current {
			color: #fff;
			background: linear-gradient(90deg, rgba(233, 144, 64, 1), rgba(255, 127, 77, 1));
			&:after {
				content: '';
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				width: 50px;
				height: 0;
				/* border-bottom: 2px solid #fa436a; */
				// border-bottom: 2px solid #f81149;
			}
		}
	}
}
.center {
	width: 100%;
	height: 100%;
	z-index: 120;
	// padding-top: 80upx;
	position: absolute;
}
.swiper-box {
	height: 100%;
}
.list-scroll-content {
	height: 100%;
}
</style>
